﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <link href="~/Areas/Back/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Areas/Back/lib/layui/css/layui.mobile.css" rel="stylesheet" />
    <script src="~/Areas/Back/lib/layui/layui.js"></script>
</head>
<body>
    <div class="layui-container" style="margin-top:50px;margin-bottom:150px">
        @* onsubmit="return false"禁止form提交 *@
        <form class="layui-form" id="addForm" onsubmit="return false">
            <input type="hidden" id="Id" value="@ViewBag.A.Id">
            @* 图片 *@
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block">
                    @* hidden隐藏 只用来存值 *@
                    <input type="file" id="uplaodImg" name="uplaodImg" />
                    <input type="hidden" id="ImgUrl" value="@ViewBag.A.ImgUrl" />
                </div>
            </div>
            @* 填充图片的位置 *@
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <img id="imgPhoto" src="~/@ViewBag.A.ImgUrl" class="layui-upload-img" style="width:180px; height:140px" />
                </div>
            </div>
            @* 名字 *@
            <div class="layui-form-item">
                <label class="layui-form-label">名字</label>
                <div class="layui-input-block">
                    <input type="text" id="Name" value="@ViewBag.A.Name" class="layui-input" placeholder="请输入名字" />
                </div>
            </div>
            @* 职位 *@
            <div class="layui-form-item">
                <label class="layui-form-label">职位</label>
                <div class="layui-input-block">
                    <input type="text" id="Position" value="@ViewBag.A.Position" class="layui-input" placeholder="请输入职位" />
                </div>
            </div>
            @* 提交和重置按钮 *@
            <div class="layui-form-item">
                <label class="layui-form-label">详情</label>
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="subAdd">提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    layui.use(['form', 'layedit', 'upload'], function () {
        var form = layui.form;
        var layedit = layui.layedit;
        var layer=layui.layer;
        //加载图片上传模块
        var upload = layui.upload;
        var $ = layui.$;
        //图片上传
        upload.render({
            elem: "#uplaodImg",
            url: "uploadPhoto",
            done: function (res) {
                //上传成功
                if (res.success == true) {
                    $("#ImgUrl").val(res.path);
                    $("#imgPhoto").attr("src", "/" + res.path);
                    layer.msg("上传成功");
                } else {
                    layer.msg("上传失败:" + res.message);
                }
            }
        });
        //开始处理点击提交
        form.on('submit(subAdd)', function () {
            //ajax 请求
            $.ajax({
                url: "EditDel",
                method: "post",
                dataType: "json",
                data: {
                    Id: $("#Id").val(),
                    Name: $("#Name").val(),
                    ImgUrl: $("#ImgUrl").val(),
                    Position:$("#Position").val()
                },
                success: function (res) {
                    if (res.success == true) {
                        layer.msg(res.msg);
                        //关闭当前窗口，并且刷新列表
                        //1.获取弹窗的编号
                        var index = parent.layer.getFrameIndex(window.name);
                        //2.关闭窗口
                        parent.layer.close(index);
                        //3.刷新父级页面
                        parent.location.reload();
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
            return false;
        });
    });
</script>
</script>
</html>